<template>
  <div>
    <div class="collection-tab">
      <button-tab>
        <button-tab-item selected @on-item-click="onItemClick">店铺</button-tab-item>
        <button-tab-item @on-item-click="onItemClick">通心号</button-tab-item>
      </button-tab>
    </div>
    <div class="tab-item" v-show="nowIndex===0">
    	<div class="edit-wrapper">
    		<div class="edit" v-show="focuseditshow" @click="focusedit">编辑</div>
    		<div class="done" v-show="focusdoneshow" @click="focusdone">完成</div>
    	</div>
    	<div class="shop-list-wraper">
					<div class="shop-list-item" v-for="(shop,index) in focushopList">
							<div class="celltion-check" v-show="focuscheckshow">
								<input type="checkbox" :value="shop.id" v-model="shopchecked"/>
							</div>
							<a class="focus-shop-a" :href="'#/trade/shop/' + shop.id ">
			  					<div class="item-shop-ifo">
			  						<div class="shop-portrait" v-bind:style="{backgroundImage: 'url(' + shop.avatar_view+'?imageView2/2/w/100)'}"></div>
			  						<div class="shop-tittle">
			  							<div class="shop-table">
			  								<div class="shop-table-cel">
					  							<div class="shop-name ellipsis">
					  								<span v-if="shop.verify_classify">{{shop.verify_name}}</span>
					  								<span v-else>{{shop.contact_name}}</span>
					  							</div>
					  							<span class="verify-type firm-jxs" v-if="shop.verify_classify==2&&shop.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="shop.verify_classify==2&&shop.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="shop.verify_classify==1&&shop.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="shop.verify_classify==1&&shop.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="shop.verify_classify==1&&shop.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="shop.verify_classify==1&&shop.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="shop.verify_classify==1&&shop.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="shop.verify_classify==1&&shop.verify_type==11"></span>
					  						</div>
					  					</div>
			  						</div>
			  					</div>
			  					<div class="shop-shelve clearfix">
			  						<div class="sale ellipsis" v-if="shop.kind_supply.length"><i class="sale-icon"></i><span v-for="kind in shop.kind_supply">{{kind.name}}</span></div>
			  						<div class="buy ellipsis" v-if="shop.kind_demand.length"><i class="buy-icon"></i><span v-for="kind in shop.kind_demand">{{kind.name}}</span></div>
			  					</div>
			  			</a>
					</div>
	  	</div>
    	<div class="delete-wrapper" v-show="focusdeteleshow">
    		<div class="check-all" @click="focuscheckall">
    			<span>全选</span>
    		</div>
    		<div class="detele-button" @click="removeshop">删除</div>
    	</div>
    </div>
    <div class="tab-item" v-show="nowIndex===1">
    	<div class="cellection-demand-list">
    		<div class="focus-txh">—— 暂无数据 ——</div>
    	</div>
    </div>
  </div>
</template>


<script>
import { ButtonTab, ButtonTabItem} from 'vux'
export default {
	data () {
	    return {
	      nowIndex:0,
	      focushopList:[],
	      focuseditshow:true,
	      focusdoneshow:false,
	      focuscheckshow:false,
	      shopchecked:[],
	      focusdeteleshow:false,
	      shopallcheck:false,
	    }
	 },
  components: {
    ButtonTab,
    ButtonTabItem
  },
  methods: {
    onItemClick(index) {
     this.nowIndex = index
    },
    focusedit(){
    	this.focuseditshow=false;
    	this.focusdoneshow=true;
    	this.focuscheckshow=true;
    	this.focusdeteleshow=true;
    },
    focusdone(){
    	this.focuseditshow=true;
    	this.focusdoneshow=false;
    	this.focuscheckshow=false;
    	this.focusdeteleshow=false;
    },
    focuscheckall(){
    	this.shopallcheck=!this.shopallcheck;
    	if(this.shopallcheck){
	    		this.shopchecked = this.focushopList.map(v=>{
	    		return v.id
	    		})
	    	}else{
	    		this.shopchecked =[]
	    	}
    },
    removeshop(){
    	let data = {ids : this.shopchecked}
			axios.post('/api/trade/shop/deleteCollection',qs.stringify(data)).then( response=>{
				axios.get('/api/trade/shop/getCollectionList').then(response => {
					this.focushopList = response.data.resp_data.data;
				})
			})	
    }
  },
  mounted() {
  	axios.get('/api/trade/shop/getCollectionList').then(response => {
		this.focushopList = response.data.resp_data.data;
	});
  }
}
</script>

<style scoped>
@import url("../../../styles/common/trade/trade-common.css");
#t_main{background: #fff;}
.detail-wrapper {
	width: 100%;
	background: #eee;
}
.collection-tab{width: 40%; margin: 15px auto;}
.vux-button-group > a {color:#008cf0 !important;}
.vux-button-group > a.vux-button-tab-item-first:after {
    border: 1px solid #008cf0 !important;
    color: #04BE02;
    border-top-left-radius:10px !important;
    border-bottom-left-radius:10px !important;
}
.vux-button-group > a.vux-button-tab-item-last:after {
    border-right: 1px solid #008cf0 !important;
    border-top: 1px solid #008cf0 !important;
    border-bottom: 1px solid #008cf0 !important;
    color: #04BE02;
    border-top-right-radius:10px !important;
    border-bottom-right-radius:10px !important;}
.vux-button-group > a.vux-button-tab-item-first{border-top-left-radius:5px !important;border-bottom-left-radius:5px !important;}
.vux-button-group > a.vux-button-tab-item-last {border-top-right-radius:5px !important;border-bottom-right-radius:5px !important;}
.vux-button-group > a.vux-button-group-current {background: #008cf0 !important; color: #fff !important;}
.tab-item{border-top:1px solid #eee;}
.shop-list-wraper{padding:0 10px;}
.shop-list-wraper .shop-list-item {margin: 10px 0;}
.edit-wrapper{width: 50px;height:30px;position: absolute;top:15px;right:10px;line-height: 30px;font-size: 15px;color: #999;overflow: hidden;}
.shop-list-item{display: flex;margin-top:10px;}
.shop-list-item .celltion-check{flex:0 0 15px;width:15px;margin:40px 5px 0 5px;}
.focus-shop-a{flex: 1;border: 1px solid #eee;border-radius: 3px;}
.delete-wrapper{height: 50px;width:100%;display: flex;position: fixed;background: #fff; bottom: 0;left: 0;font-size:15px;line-height: 30px;border-top:1px solid #eee;}
.check-all{flex:0 0 60%; width: 60%;padding:10px;height: 30px;}
.detele-button{flex:1;text-align: center;background: #008CF0;color: #fff;padding:10px 0;}
.focus-txh{height:30px; width: 100%; text-align: center;line-height: 30px;margin: 20px 0;font-size: 14px;color: #999;}
</style>
